<template>
	<view class="hotrecharge-page bgimg3">
		<u-navbar :title="$t('hhh.t209')" :autoBack="false" bg-color="transparent" leftIconColor="#ffffff"
			:titleStyle="{'color':'#ffffff'}" @leftClick="leftClick"></u-navbar>
		<u-gap height="150" bgColor="transparent"></u-gap>
		<view class="rounded-top-max-lg bg-white py-5 px-3 flex flex-wrap justify-between box-sizing">
			<view class="huolizhi-item flex align-center flex-column pt-3 mb-4" v-for="(item,index) in giftList" :key="index"
				:class="currentGift === index?'active':''" @tap="changeGift(index)">
				<view class="flex align-center">
					<image src="/static/imgs/huolizhi.png" mode="aspectFill" class="w-48 h-48" style="margin-right:-24rpx;">
					</image>
					<text class="bg-white rounded fs-36 font-weight-bold pr-2 py-1 pl-3">{{item.num}}</text>
				</view>
				<view class="flex align-center justify-center" style="height: 155rpx;">
					<image :src="item.img" mode="aspectFill" :style="{'width':item.width +'rpx','height':item.height+'rpx'}">
					</image>
				</view>
				<view class="flex align-center mt-4">
					<text class="text-white fs-36 font-weight-bold">{{item.jinbi}}</text>
					<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 ml-1"></image>
				</view>
			</view>
		</view>
		<view class="border bdcolor4 rounded-lg px-2 py-1 mx-3">
			<u--input :placeholder="$t('hhh.t160')" border="surround" v-model="amount" :customStyle="{
				'border':0
			}"></u--input>
		</view>
		<u-gap height="100" bgColor="transparent"></u-gap>
		<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold flex-1 mx-3">
			{{$t('hhh.t210')}}
		</view>
		<u-gap height="100" bgColor="transparent"></u-gap>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				amount: '',
				giftList: [{
					num: 200,
					jinbi: 20,
					img: '/static/imgs/huolizhi1.png',
					width: 88,
					height: 88,
				}, {
					num: 500,
					jinbi: 50,
					img: '/static/imgs/huolizhi2.png',
					width: 134,
					height: 88,
				}, {
					num: 800,
					jinbi: 80,
					img: '/static/imgs/huolizhi3.png',
					width: 134,
					height: 116,
				}, {
					num: 1000,
					jinbi: 100,
					img: '/static/imgs/huolizhi4.png',
					width: 168,
					height: 116,
				}, {
					num: 1500,
					jinbi: 150,
					img: '/static/imgs/huolizhi5.png',
					width: 156,
					height: 114,
				}, {
					num: 2000,
					jinbi: 200,
					img: '/static/imgs/huolizhi6.png',
					width: 158,
					height: 108,
				}],
				currentGift: 0
			}
		},
		methods: {
			changeGift(index) {
				this.currentGift = index
			}
		}
	}
</script>

<style lang="scss">
	.hotrecharge-page {
		.huolizhi-item {
			width: 210rpx;
			height: 302rpx;
			background-image: url('/static/imgs/huolizhiitembg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center;

			&.active {
				background-image: url('/static/imgs/huolizhiitembg_on.png');
			}
		}
	}
</style>